<template>
  <el-main class="content">
    <el-form
      v-if="titles.length !== 0"
      ref="form"
      :model="rowData"
      size="medium "
      label-width="80px"
      label-position="top"
    >
      <el-form-item
        :prop="item"
        :label="item"
        v-for="(item, index) in titles"
        :key="index"
      >
        <el-input v-model="rowData[item]" :clearable="true" />
      </el-form-item>

      <!-- 按钮项 -->
      <el-form-item>
        <el-button type="primary" @click="updateClick">立即创建</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script>
import { UpdateData } from 'network/home'
export default {
  name: 'InsertTable',
  data() {
    return {
      rowData: {},
      isShow: false
    }
  },

  props: {
    titles: {
      type: Array,
      default() {
        return []
      }
    },

    tableName: {
      type: String,
      default() {
        return ''
      }
    }
  },

  created() {
    //为rowData添加数据双向绑定
    for (const i of this.titles) {
      this.$set(this.rowData, i, '')
    }
  },
  methods: {
    updateClick() {
      this._UpdateData().then(res => {
        if (res.data.result == true) {
          this.$notify({
            type: 'success',
            title: '成功',
            message: '记录更新成功'
          })
        } else {
          this.$notify({
            type: 'error',
            title: '失败',
            message: '记录更新失败'
          })
          Object.assign(this.rowData, this.preVal)
        }
      })
    },

    cancel() {
      console.log('cancel')
      this.$refs.form.resetFields()
    },

    /**
     * 请求数据
     */
    _UpdateData() {
      let obj = { sqlType: 'insert', tableName: this.tableName }
      Object.assign(obj, this.rowData)
      console.log(obj)
      return UpdateData(obj)
    }
  }
}
</script>

<style  scoped>
</style>